<template>
  <div class="scroll-wrap"
       ref="scroll_wrap">
    <slot></slot>
  </div>
</template>
<script>
import BScroll from '@better-scroll/core'
export default {
  props: {
    listenScroll: {
      type: Boolean,
      default: false
    },
    listenScrollEnd: {
      type: Boolean,
      default: false
    },
    listenTouchEnd: {
      type: Boolean,
      default: false
    },
    listenBounce: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.bs = new BScroll(this.$refs.scroll_wrap, {
        probeType: 3,
        click: true,
        bounce: this.listenBounce
      })
      this.listenScroll && this.onScrollEvent()
      this.listenScrollEnd && this.onScrollEndEvent()
      this.listenTouchEnd && this.onTouchEndEvent()
    })
  },
  methods: {
    onScrollEvent () {
      this.bs && this.bs.on('scroll', (pos) => {
        this.$emit('onScroll', pos)
      })
    },
    onScrollEndEvent () {
      this.bs && this.bs.on('scrollEnd', () => {
        this.$emit('onScrollEnd')
      })
    },
    onTouchEndEvent () {
      this.bs && this.bs.on('touchEnd', () => {
        this.$emit('onTouchEnd')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.scroll-wrap {
  height: 100%;
  overflow: hidden;
}
</style>
